<template>
  <div>
    <el-row style="margin-bottom:10px">
      <el-button type="primary" size="mini" >
        <router-link :to= "{ path: '/slide'}" tag="a" target="_blank" style="color:#ffffff" >轮播图管理</router-link>
      </el-button>
      <el-button type="primary" size="mini" @click="refresh">刷新</el-button>
      <el-input v-model="query" clearable placeholder="请输入轮播图名称" style="width: 200px; margin-left:306px;" size="mini" class="filter-item" @keyup.enter.native="toQuery" />
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
    </el-row>
    <el-table
      :data="data"
      style="width: 100%"
      @row-click="selectRow">
      <el-table-column
        prop="slideName"
        label="轮播图名称">
        <template slot-scope="scope">
          <el-radio
            v-model="radio"
            :label="scope.row.carouse_id"
            @change="change(scope.row)">
            {{ scope.row.carouse_name }}
          </el-radio>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      background
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange" />
    <div
      slot="footer"
      class="dialog-footer"
      style="margin-left:600px">
      <el-button
        size="small"
        @click="cancel">取消</el-button>
      <el-button
        :loading="loading"
        type="primary"
        size="small"
        @click="doSubmit">确认</el-button>
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
export default {
  mixins: [initData],
  props: {
    rowData: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    }
  },
  data() {
    return {
      radio: '',
      shelfList: {},
      query: ''
    }
  },
  watch: {
    rowData: {
      handler(newValue, oldValue) {
        this.radio = newValue.p_id
      },
      deep: true
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
      this.radio = this.rowData.p_id
    })
  },
  methods: {
    beforeInit() {
      this.showButton = false
      this.url = 'api/slideshow-list'
      const sort = 'carouse_id,desc'
      const query = this.query
      // eslint-disable-next-line no-unused-vars
      const value = query.value
      this.params = { page: this.page, size: this.size, sort: sort }
      if (query) { this.params['carouse_name'] = query }
      return true
    },
    change(e) {
      // eslint-disable-next-line no-unused-vars
      this.shelfList = [{ p_id: e.carouse_id, p_name: e.carouse_name }]
    },
    /* 触发父组件取消事件 */
    cancel() {
      this.$emit('fun', false)
    },
    /* 触发父组件确定事件 */
    doSubmit() {
      this.$emit('submit', this.shelfList)
    },
    /* 刷新轮播图数据 */
    refresh() {
      this.query = ''
      this.page = 0
      this.init()
    },
    selectRow(e) {
      this.shelfList = [{ p_id: e.carouse_id, p_name: e.carouse_name }]
      this.radio = e.carouse_id
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
